<template>
	<view class="imgComparison" :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
		<view class="before-image" :style="'width:' + x + 'rpx'">
			<view :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
				<image :src="beforeImageUrl" class="images" mode="aspectFill" data-type="before" @tap="previewImage">
				</image>
			</view>
			<view v-if="beforeText" class="before-text">
				{{ beforeText }}
			</view>
		</view>
		<view class="after-image">
			<view :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
				<image :src="afterImageUrl" class="images" mode="aspectFill" data-type="after" @tap="previewImage">
				</image>
			</view>
			<view v-if="afterText" class="after-text">
				{{ afterText }}
			</view>
		</view>

		<view class="slider-bar" :style="'left:' + x + 'rpx'" @touchmove="handleTouchMove"
			@touchstart="handleTouchStart" @touchend="handleTouchEnd">
			<view class="slider-container">
				<view class="slider-button">
					<view class="slider-icon"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			width: {
				type: String,
				default: "750"
			},
			height: {
				type: String,
				default: "850"
			},
			beforeImageUrl: {
				type: String
			},
			afterImageUrl: {
				type: String
			},
			beforeText: {
				type: String,
				default: "制作前"
			},
			afterText: {
				type: String,
				default: "制作后"
			}
		},

		data() {
			return {
				isPressDown: false, //鼠标是否正按住
				x: this.width / 2 //设置位置
			}
		},
		methods: {
			handleTouchStart(event) {
				this.isPressDown = true;
				// this.x = event.target.offsetLeft * 2;
				// if (this.x <= 0) {
				// 	this.x = this.width / 2;
				// }
			},
			handleTouchMove(event) {
				if (!this.isPressDown) {
					return;
				}
				this.x = event.touches[0].clientX * 2;
				if (this.x >= this.width - 6) {
					this.x = this.width - 6;
				} else if (this.x <= 0) {
					this.x = 0;
				}
			},
			handleTouchEnd(event) {
				this.isPressDown = false;
				return false;
			},
			previewImage(e) {
				let current = e.currentTarget.dataset.type === "after" ? this.afterImageUrl : this.beforeImageUrl
				uni.previewImage({
					urls: [this.beforeImageUrl, this.afterImageUrl],
					current: current
				})
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	.imgComparison {
		position: relative;
		display: inline-block;
		overflow: hidden;

		.before-image {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 50%;
			overflow: hidden;

			.before-text {
				position: absolute;
				left: 10rpx;
				bottom: 10rpx;
				color: #FFFFFF;
				background-color: #2D2D2D;
				padding: 2rpx 8rpx 4rpx 6rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				white-space: nowrap;
			}
		}

		.after-image {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;

			.after-text {
				position: absolute;
				right: 10rpx;
				bottom: 10rpx;
				color: #FFFFFF;
				background-color: #2D2D2D;
				padding: 2rpx 8rpx 4rpx 6rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				white-space: nowrap;
			}
		}

		.images {
			width: 100%;
			height: 100%;
		}

		.slider-bar {
			cursor: move;
			position: absolute;
			width: 100rpx;
			left: 50%;
			top: 0rpx;
			background: none;
			height: 100%;
			display: block;
			z-index: 2;

			.slider-container {
				height: 100%;
				top: 0;
				width: 6rpx;
				background: #fff;
				position: absolute;
				left: 0;
				margin: auto;

				.slider-button {
					position: absolute;
					width: 120rpx;
					height: 100%;
					background-color: transparent;
					left: calc(50% - 50rpx);
					top: 0;

					.slider-icon {
						width: 100rpx;
						height: 50rpx;
						left: 0;
						top: calc(50% - 25rpx);
						left: calc(50% - 60rpx);
						position: absolute;
						border: 6rpx solid #fff;
						border-radius: 6rpx
					}
				}

				&::before {
					content: '';
					padding: 6rpx;
					border: solid #FFFFFF;
					border-width: 0 4rpx 4rpx 0;
					position: absolute;
					top: calc(50% - 8rpx);
					left: calc(50% - 30rpx);
					transform: rotate(135deg);
					z-index: 1;
				}

				&::after {
					content: '';
					padding: 6rpx;
					border: solid #FFFFFF;
					border-width: 0 4rpx 4rpx 0;
					position: absolute;
					top: calc(50% - 8rpx);
					right: calc(50% - 30rpx);
					transform: rotate(-45deg);
				}
			}

		}
	}
</style>